<template>
  <canvas id="container"></canvas>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { UltimateCanvas, UGroup } from "./lib/index";
import { GridLayer } from "./lib/layers";
import { URect, UText, UCircle, UTriangle, UImage, ULine } from "./lib/components/index";

import testPng from './assets/test.png'


export default defineComponent({
  setup() {

    onMounted(() => {
      const uCanvas = new UltimateCanvas("container", {
        width: 1500,
        height: 800
      })
      console.log(uCanvas)

      // 辅助网格图层
      const gridLayer = new GridLayer()
      const myLayer = new UGroup({ zIndex: 5, name: "custom_layer" })

      // 红色方块
      const rect1 = new URect({
        x: 0,
        y: 100,
        width: 200,
        height: 200,
        backgroundColor: 'red'
      })

      // 文字
      const text1 = new UText({
        x: 0,
        y: 200,
        content: "组1",
        color: '#ffffff',
        fontSize: 20
      })


      //灰色⚪
      const circle1 = new UCircle({
        x: 0,
        y: 450,
        radius: 100,
        backgroundColor: 'rgba(66,158,111,0.5)'
      })

      //紫色三角
      const triangle1 = new UTriangle({
        x: 0,
        y: 700,
        height: 100,
        zIndex: 10,
        backgroundColor: 'purple'
      })

      const line1 = new ULine({
        lineWidth: 6,
        color: 'red',
        pointList: [
          [200, 400],
          [1000, 400]
        ],
        curvatureA: [300, 300],
        curvatureB: [700, 500]
      })

      uCanvas.add(gridLayer, myLayer, triangle1, circle1, line1)
      myLayer.add(rect1, text1)

      // uCanvas.add(new UImage({
      //   width: 800,
      //   height: 400,
      //   x: 0,
      //   y: 0,
      //   zIndex: -10,
      //   src: testPng
      // }))

      uCanvas.render()

      let step = 10
      let x = 0
      let direction = "right"
      const move = () => {
        if (x >= 1000) direction = "left"
        if (x <= 0) direction = "right"

        if (direction === "right") x += step
        if (direction === "left") x -= step

        rect1.setOption({ x })
        text1.setOption({ x })
        circle1.setOption({ x })
        triangle1.setOption({ x })

        line1.setOption({
          curvatureA: [300 - x, 300 - x],
          curvatureB: [700 + x, 500 + x],
        })

        uCanvas.render()

        requestAnimationFrame(move)
      }

      // setInterval(move, 200)

      requestAnimationFrame(move)
    })
  }
})


</script>
